<template>
  <div class="system-settings">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>
      <el-form :model="systemForm" label-width="120px">
        <el-form-item label="系统名称">
          <el-input v-model="systemForm.name" />
        </el-form-item>
        <el-form-item label="系统描述">
          <el-input v-model="systemForm.description" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="系统Logo">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleLogoSuccess"
            :before-upload="beforeLogoUpload"
          >
            <img v-if="systemForm.logo" :src="systemForm.logo" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="系统主题">
          <el-select v-model="systemForm.theme" placeholder="请选择主题">
            <el-option label="默认" value="default" />
            <el-option label="暗黑" value="dark" />
            <el-option label="蓝色" value="blue" />
          </el-select>
        </el-form-item>
        <el-form-item label="系统语言">
          <el-select v-model="systemForm.language" placeholder="请选择语言">
            <el-option label="中文" value="zh-CN" />
            <el-option label="英文" value="en-US" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useSystemStore } from '@/store/system';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

export default defineComponent({
  name: 'SystemSettings',
  components: {
    Plus
  },
  setup() {
    const systemStore = useSystemStore();
    const systemForm = reactive({
      name: '',
      description: '',
      logo: '',
      theme: 'default' as 'default' | 'dark' | 'blue',
      language: 'zh-CN' as 'zh-CN' | 'en-US'
    });

    const handleLogoSuccess = (response: any) => {
      systemForm.logo = response.url;
    };

    const beforeLogoUpload = (file: File) => {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        ElMessage.error('上传文件只能是图片格式!');
      }
      if (!isLt2M) {
        ElMessage.error('上传图片大小不能超过 2MB!');
      }
      return isImage && isLt2M;
    };

    const handleSave = async () => {
      await systemStore.updateSystemSettings(systemForm);
      ElMessage.success('系统设置已保存');
    };

    const fetchSystemSettings = async () => {
      const settings = await systemStore.fetchSystemSettings();
      Object.assign(systemForm, settings);
    };

    fetchSystemSettings();

    return {
      systemForm,
      handleLogoSuccess,
      beforeLogoUpload,
      handleSave
    };
  }
});
</script>

<style lang="scss" scoped>
.system-settings {
  padding: 20px;

  .box-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .avatar-uploader {
    :deep(.el-upload) {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);

      &:hover {
        border-color: var(--el-color-primary);
      }
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    line-height: 178px;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style> 